<template>
  <div id="app">
    <div class="background"></div>
    <transition name="fade" mode="out-in">
      <SakikoCharacter
        v-if="currentPage === 'sakiko'"
        @go-to-lianliankan="goToLianLianKan"
        key="sakiko"
      />
      <LianLianKan
        v-else
        @go-back="goBack"
        key="lianliankan"
      />
    </transition>
  </div>
</template>

<script>
import SakikoCharacter from './components/SakikoCharacter.vue'
import LianLianKan from './components/LianLianKan.vue'

export default {
  name: 'App',
  components: { SakikoCharacter, LianLianKan },
  data() {
    return {
      currentPage: 'sakiko'
    }
  },
  methods: {
    goToLianLianKan() {
      this.currentPage = 'lianliankan'
    },
    goBack() {
      this.currentPage = 'sakiko'
    }
  }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  z-index: -1;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>